<template>
  <view class="pagebox">
    <div class="q_tip">
      <p class="rpx28 app_col">
        * Q27-2.
        <text class="rpx28 col282">堆头/端架/冰爽站：记录百事可乐公司汽水品类的包装类型面积（平方米）：</text>
      </p>
    </div>
    <div class="size">
      <div class="s_it" v-for="(it,ind) in size[select]" :key="ind">
        <p class="rpx28 col666">{{it.name}}</p>
        <input
          class="q_number rpx328 col3A4060"
          @input="inputValue($event,ind)"
          type="number"
          cursor-spacing="10"
          :value="it.val"
          placeholder="陈列面积"
          placeholder-class="rpx28 colB3B"
        />
      </div>
    </div>

    <div style="height: 222upx;"></div>
    <div class="but88box">
      <navigator @click="toNext" class="but88 rpx32 colfff app_bg">下一步</navigator>
    </div>

    <uni-popup
      class="u_p"
      :show="type === 'center'"
      position="middle"
      mode="fixed"
      msg
      @hidePopup="togglePopup('')"
    >
      <div class="show_up">
        <img class="lx_img" src="static/s4.png" @click="togglePopup('')" />
        <div class="lx_title">
          <p class="rpx28 app_col omit2">
            * Q28.
            <text class="rpx28 col282">请查看该店铺是否还有其他二次陈列？</text>
          </p>
        </div>
        <div class="lx_but">
          <navigator class="rpx34 colfff" @click="toNo">无</navigator>
          <navigator class="rpx34 colfff app_bg" @click="toYes">有</navigator>
        </div>
      </div>
    </uni-popup>
  </view>
</template>
<script>
import mixins from "@/mixins";
import ntfy from "../../components/ntfy/index.vue";
import uniPopup from "../../components/uni-popup/uni-popup.vue";
import { mapState } from "vuex";
export default {
  // mixins: [mixins],
  components: { ntfy, uniPopup /*,uniCollapse,uniCollapseItem*/ },
  data() {
    return {
      type: "",
      size: [
        [
          { name: "1）小支装多支装：<＝680毫升多支装", val: "" },
          { name: "2）小支装单支装：<＝680毫升多支装", val: "" },
          { name: "3）大支装>680毫升单支装或者多支装（包装跨品类）", val: "" }
        ]
      ],
      question: [],
      select: 0
    };
  },
  onBackPress() {
    if (this.type !== "") {
      this.type = "";
      return true;
    }
  },
  onLoad(e) {
    let _that = this;
    _that.shopId = e.shopId;
    _that.catId = e.catId;
    _that.select = e.select;
    uni.getStorage({
      key: "shopId-" + _that.shopId,
      success: res => {
        if (res.data.sel[25].sel_data) {
          _that.size = res.data.sel[25].sel_data;
        } else {
          uni.getStorage({
            key: "question",
            success: res => {
              //_that.question = res.data;
              // let arr = []
              // arr.push(res.data[24].item)
              // _that.size.push(arr)
            }
          });
        }
      },
      fail: res => {}
    });
    //处理循环添加数据
			if((+_that.select+1)!= _that.size.length){
			uni.getStorage({//Q27-1
				key: "question",
				success: res => {
          //_that.size.push(res.data[24].item)
          _that.size.push(
            [
              { name: "1）小支装多支装：<＝680毫升多支装", val: "" },
              { name: "2）小支装单支装：<＝680毫升多支装", val: "" },
              { name: "3）大支装>680毫升单支装或者多支装（包装跨品类）", val: "" }
            ]
          )
				}
			})
			}
  },
  computed: {
    // ...mapState(['storeId']),
    // ...mapState(['catId'])
  },
  methods: {
    togglePopup(type) {
      this.type = type;
    },
    inputValue(e, index) {
      this.size[this.select][index].val = e.detail.value;
    },
    toNext() {
      //保存数据
      //this.question.sel[25].item = this.size;
      let _that = this;
      uni.getStorage({
        key: "shopId-" + _that.shopId,
        success: res => {
          res.data.sel[25].sel_data = _that.size;
          uni.setStorage({
            key: "shopId-" + _that.shopId,
            data: res.data
          });
        }
      });
      this.type = "center";
    },
    toNo() {
      mixins.navigate(
        "../index/lixian_steps?shopId=" + this.shopId + "&catId=" + this.catId
      );
    },
    toYes() {//循环添加
      mixins.navigate("sel?index=4&shopId="+this.shopId +"&catId="+this.catId +"&select=" +this.size.length);
    }
  }
};
</script>

<style scoped>
.size {
  background: #fff;
  border-top: 1px solid #dcdcdc;
  border-bottom: 1px solid #dcdcdc;
  padding: 34upx 0 24upx;
}
.s_it {
  margin: 0 47upx 60upx 47upx;
}
.s_it p {
  margin-bottom: 30upx;
  line-height: 48upx;
}

.q_number {
  text-align: center;
  width: 128upx;
  height: 60upx;
  background: rgba(234, 234, 234, 1);
  border-radius: 4upx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 29upx;
}

.but88box {
  position: fixed;
  width: 100%;
  bottom: 0;
  background: #f7f7f7;
}
.but88 {
  margin: 40upx 32upx 102upx;
  height: 80upx;
  width: unset;
}

.u_p >>> .uni-popup {
  height: unset !important;
  border-radius: 8upx;
  padding: 0;
}
</style>